<!DOCTYPE html>
<html>
	<head>
		<title>{{title}}</title>
		<meta charset='utf-8'>
		<meta name='viewport' content='width=device-width, initial-scale=1'>
		{% load static %}
		<link href="{% static 'css/bootstrap.min.css' %}" rel='stylesheet'>
		<link rel="stylesheet" href="{% static 'css/index.css' %}">
   		<script src='http://apps.bdimg.com/libs/jquery/1.11.1/jquery.min.js'></script>
		<script src="{% static 'js/bootstrap.min.js' %}"></script>
	</head>
	<body>
		<div class='container'>
			<div class='row'>
				<header>
					<div class='logo'>
						<h1>X的博客</h1>
					</div>	
				</header>
			</div>
			<!--以上为logo-->
			<div class='row'>
				<nav class='navbar navbar-default'>
					<div class='container-fluid'>
						<div class='navbar-header'>
							<button type='button' class='navbar-toggle pull-right' data-toggle='collapse' data-target='#nav-collapse'>
								<span class='icon-bar'></span>
								<span class='icon-bar'></span>
								<span class='icon-bar'></span>
							</button>
							<div class='col-xs-6 col-sm-6 col-lg-6 navbar-left'>
								<a class=' navbar-brand' href='/'>MYBLOG</a>
							</div>
						</div>
						<div class='collapse navbar-collapse pull-right' id='nav-collapse'>
							<ul class='nav navbar-nav'>
								<li><a href='/'>HOME</a></li>
								<li><a href='#'>ABOUT</a></li>
								<li><a href='#'>CONTACT</a></li>
								<li>
									<form class='navbar-form navbar-left' method="get" action="/keyWord/" role='search'>
           								<div class='form-group'>
                							<input type='text' class='form-control' name='keyWord' placeholder='Search'>
            							</div>
            							<button type='submit' class='btn btn-primary'>
            								<a href='#'>
          										<span class='glyphicon glyphicon-search' style='color:white'></span>
        									</a>
        								</button>
        							</form>
								</li>
							</ul>
						</div>
					</div>
				</nav>
			</div>
		</div>
		<!--以上为上部导航-->
		<div class='container'>
			<!--主体-->
			<div class='row'>
				<aside class='col-md-3'>
					<div class='list-group'>
						<a class='list-group-item side-list-title'>
							<h3 align='center' class='list-group-item-heading'>
								<span class='glyphicon glyphicon-leaf'></span>
								文章类型
							</h3>
						</a>
						{% for category in category_list %}
						<a href='{{category.link}}' class='list-group-item'>
							<h4 align='center' class='side-list-item' >
								{{category.name}}
								<span class='glyphicon glyphicon-chevron-right'></span>
							</h4>
						</a>
						{% endfor %}
					</div>
					<div class='list-group'>
						<a class='list-group-item side-list-title'>
							<h3 align='center' class='list-group-item-heading'>
								<span class='glyphicon glyphicon-tags'></span>
								文章标签
							</h3>
						</a>
						<form class='list-group-item tags-form' align='center' action="/tag/" method="get">
							<fieldset>
								{% for tag in tag_list %}
								<span class='label label-danger tags-span' onclick='chose()' id='{{tag.id}}'>
									<input class='tags-checkbox' type='checkbox' name='{{tag.id}}' id='{{tag.id}}-c'>{{tag.name}}</input>
								</span>
								{% endfor %}
							</fieldset>
							<fieldset>
								<button type='submit' class='btn btn-primary tags-submit'>
            					<span style='color:white'>
            						筛选
          							<span class='glyphicon glyphicon-search' ></span>
        						</span>
        					</button>
							</fieldset>
						</form>
					</div>
				</aside>
				<main class='col-md-9'>
					{% for article in article_list %}
					<article class='post post-1'>
						<header class='entry-header'>
							<h1 class='entry-title' align='center'>
								<a href='{{article.link}}'>{{article.title}}</a>
							</h1>
							<div class='entry-meta' align='center'>
								<span class='post-category about'>{{article.category}}&nbsp;&nbsp;·&nbsp;&nbsp;</span>
			
								<span class='post-date about'><time class='entry-date'>{{article.create_time}}&nbsp;&nbsp;·&nbsp;&nbsp;</time></span>
			
								<span class='post-author about'>{{article.author}}</span>
							</div>
						</header>
						<div class='entry-content clearfix'>
							<p style='font-size:1.3em;text-indent:2em;margin:0 5% 0 5%' >{{article.excerpt}}</p>
							<div class='read-more cl-effect-14' align='center' >
								<a href='{{article.link}}' class='more-link' >Continue reading <span class='meta-nav'>→</span></a>
							</div>
						</div>
					</article>
					{% empty %}
					<div class="no-post">暂时还没有发布的文章！</div>
					{% endfor %}
				</main>
			</div>
		</div>
	</body>
<script>
    <!-- js监测checkbox是否被选中 -->
    function chose(){
    	var obj=event.srcElement;
    	var t=$('#'+obj.id);
    	var c=$('#'+obj.id+'-c');
    	if(!c.prop('checked')){
    		t.removeClass('label-danger');
    		t.addClass('label-success');
    		c.prop('checked',true);
    	}
    	else{

    		t.removeClass('label-success');
    		t.addClass('label-danger');
    		c.prop('checked',false);
    	}
    	
    }
    function checkbox()
    {
        var box1 = document.getElementById('checkbox1');
        var box2 = document.getElementById('checkbox2');
        var box3 = document.getElementById('checkbox3');
        var box4 = document.getElementById('checkbox4');
        if (!box1.checked) {
            alert(box1.value);
        }
        if (box2.checked) {
            alert(box2.value);
        }
        if (box3.checked) {
            alert(box3.value);
        }
        if (box4.checked) {
            alert(box4.value);
        }
        //点击确认按钮后（或者点击下一页后）让所有按钮恢复初始状态

    }
</script>
</html>
